<template>
	<!-- 遮罩层 -->
	<view 
		v-if="visible"
		class="modal-backdrop"
		@click="handle('cancal')"
	/>
	<!-- 弹窗内容 -->
	<view 
		v-if="visible"
		class="modal-container"
		:class="{ 'modal-enter': isEntering, 'modal-leave': isLeaving }"
	>
	<view class="modal-content" @click.stop="">
	  <!-- 插槽：自定义弹窗内容 -->
	  <slot></slot>
	  
	  <!-- 可选：关闭按钮 -->
	  <view class="button" > 
		  <view class="buttonItem" @click="handle('cancal')">
			    取消
		  </view>
		  <view class="buttonItem confirm" @click="handle('confirm')">
				确认
		  </view>
	  </view>
	  
	</view>
  </view>
</template>

<script setup>
import { ref, watch } from 'vue'

//  props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

//  emits
const emit = defineEmits(['handle'])

// 动画状态管理
const isEntering = ref(false)
const isLeaving = ref(false)
// 监听显示状态变化，触发动画
watch(
  () => props.visible,
  (newVal) => {
    if (newVal) {
      // 显示时触发进入动画
      isLeaving.value = false
      isEntering.value = true
      // 动画结束后重置状态
      setTimeout(() => { isEntering.value = false }, 30)
    }
  }
)

// 关闭弹窗
const handle = (a) => {
	      // 隐藏时触发离开动画
      isEntering.value = false
      isLeaving.value = true
      // 动画结束后清理状态
      setTimeout(() => { emit('handle',a)}, 300)
  
}
</script>

<style scoped>
/* 遮罩层样式 */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background-color: var(--l-color);
  opacity: 0.5;
  
}

/* 弹窗容器（负责居中） */
.modal-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
  transition: transform 0.3s ease;
}

/* 进入动画：从0放大到1 */
.modal-enter {
  transform: translate(-50%, -50%) scale(0);
}
/* 离开动画：从1缩小到0 */
.modal-leave {
  transform: translate(-50%, -50%) scale(0);
}

/* 弹窗内容样式 */
.modal-content {
  position: relative;
  padding: 24px;
  display: flex;
  flex-direction: column;
  
  width: calc(90vw - 48px);
  border-radius: 20px; /* 圆角 */
  background-color: rgba(0, 0, 0, 0.7); /* 白色半透明 */
  backdrop-filter: blur(10px); /* 毛玻璃效果 */
  border: 1px solid rgba(255, 255, 255, 0.2); /* 边框增强玻璃感 */
}

/* 按钮 */
.button{
	width: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	
}
.buttonItem {
  width: 35%;
  padding: 7px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius:999px;
  background-color: rgba(255, 255, 255, 0.2);
  color: var(--b-color);
  cursor: pointer;
  transition: background-color 0.2s;
}
.confirm{
	color: var(--f-color);
	background-color: var(--b-color);
}
.buttonItem:hover {
  background-color: rgba(255, 255, 255, 0.3);
}
</style>